<template>
  <div class="Main">
    <div class="layout-outer">
      <div class="siderBox animation frame-sider" :style="{ width: `${collapsedWidth}px` }">
        <!-- logo -->
        <div class="frameLogo frame-logo border_style" @click="gohome">
          <img @click="getpath" v-if="isCollapsed"
            :src="require(`../../assets/images/${curTheme == 'theme-blue' ? 'logo3.png' : 'logo2.png'}`)"
            style="position: relative; left: 10px;width: 213px;" />

          <img @click="getpath" v-else src="../../assets/small.png" style="height: 40px;margin-left:5px" />
          <div class="line" v-if="isCollapsed"></div>
          <span v-if="isCollapsed" class="car_title">中检云</span>
        </div>

        <!-- 菜单 -->
        <div class="frame-menu">
          <!-- <YsMMenu :unfold="isCollapsed" :MenuList_Source="meun_bean_list" @on-select="meunSelect"></YsMMenu> -->
          <YsMMenu2 :unfold="isCollapsed" :MenuList_Source="meun_bean_list" @on-select="meunSelect"></YsMMenu2>
        </div>
        <!-- 收起展开 -->
        <div class="frame-collapsed">
          <i class="icon iconfont icon-zhankai-shouqi animation"
            :style="{ transform: !isCollapsed ? 'rotate(180deg)' : '' }" @click="collapsed"></i>
          <!-- <YsIcon type="ios-arrow-back" class="animation" :style="{ transform: !isCollapsed ? 'rotate(180deg)' : '' }" @click.native="collapsed" /> -->
          <span v-if="isCollapsed" @click="collapsed" class="text_01">收起</span>
        </div>
      </div>
      <div class="contentBox">
        <div class="headerBox frame-header border_style">
          <div>
            <!-- <YsMTag :tagData="getTagItemList" :nowRouteName="nowRouteName" @on-select="NowSelTag" @on-close="NowCloseTag"></YsMTag> -->
          </div>
          <div class="demo-avatar-badge">
            <YsBadge :count="newsNumber" v-if="newsNumber">
              <YsIcon type="ios-notifications-outline" size="28" @click="getNewsInfo" />
            </YsBadge>
            <YsIcon v-else class="lingdang" type="ios-notifications-outline" size="28" @click="getNewsInfo" />
          </div>
          <div>
            <YsMHeader class="YsMHeader-one" :themeList="themeList" :nowUserInfo="nowUserInfo"
              @on-change-theme="ChangeTheme" @on-quit="Quit">
            </YsMHeader>
          </div>
        </div>
        <div class="content-box frame-content">
          <div class="breadcrumbBox" v-if="breadcrumbData.length > 0">
            <YsBreadcrumb>
              <YsBreadcrumbItem v-for="(item, key) in breadcrumbData" :key="key">
                {{ item }}
              </YsBreadcrumbItem>
            </YsBreadcrumb>
          </div>
          <news ref="newsDom"></news>
          <div class="contentCardBox">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// vuex获取基础的数据信息 必须的  否则项目中拿不到数据
import {
  init_commitData,
  saveTagItemList,
  setStystemTheme,
} from "../../utils/init_commitData";
import news from "./news.vue";
import { ys_SysAction, ys_tagAndbread } from "ys-utils-js";
import { ys_utils, ys_agentJump } from "ys-utils-js";
import YsMMenu2 from "../../components/YsMMenu/index"
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  components: {
    news,
    YsMMenu2
  },
  name: "Main",
  data() {
    return {
      newsNumber: 0,
      isCollapsed: true, // 是否展开 默认是
      collapsedWidth: 208,
      themeInfo: {}, // 切换皮肤的数据
      meun_bean_list: [],
      // 当前登录人信息
      nowUserInfo: {
        userName_title: "",
        userName: "",
        userImg: "",
        userInfo: [],
      },
      // 换肤数据
      themeList: [
        {
          title: "蓝色主题",
          themeName: "theme-blue",
          themeColor: "#0061FF",
        },
        {
          title: "白色主题",
          themeName: "theme-white",
          themeColor: "#FFFFFF",
        },
      ],
      nowRouteName: null, // 当前所在路由
      breadcrumbData: [],
    };
  },
  created() {
    init_commitData(); // commit数据
    this.getMessagenumber()
  },
  mounted() {
    // 菜单
    // window.addEventListener("popstate", function (e) {
    //   e.preventDefault()
    // }, false)

    this.meun_bean_list = this.getMenuList;

    // 获取消息列表
    this.getNewsList();
    this.getNowUserInfo();
    // 拷贝数据
    this.tagData = JSON.parse(JSON.stringify(this.getTagItemList));
  },
  computed: {
    ...mapState(['curTheme']),
    ...mapGetters([
      "getCommData",
      "getMenuList",
      "getBtnPermission",
      "getTagItemList",
    ]),
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
  methods: {
    ...mapActions(['set_curTheme', 'getMessageData', 'getDlearnTokenObj', 'getHuShiTokenObj']),

    collapsed() {
      this.isCollapsed = !this.isCollapsed;
      if (this.isCollapsed) {
        this.collapsedWidth = 208;
        return;
      }
      this.collapsedWidth = 64;
    },
    getpath() {
      ys_agentJump.agentPostMessage
        // `http://39.105.142.3:8189/#/agent?vrt=managementOrganizational/enterprise&code=03`
        // `http://139.199.31.200:8189/#/agent?vrt=home&token=-1509414262&code=74`
        //  `http://192.168.31.28:8189/#/agent?vrt=home`
        ();
    },
    // 切换皮肤
    ChangeTheme(info) {
      this.set_curTheme(info.themeName)
      setStystemTheme(info);
    },
    // 获取当前登录人信息
    getNowUserInfo() {
      let { orguser_cn_name, ent_no, bl_dprl_expls1, dept_cn_name } =
        this.getCommData;
      this.nowUserInfo = {
        userName_title: orguser_cn_name,
        userName: orguser_cn_name,
        userImg: "",
        userInfo: [
          {
            title: "工号",
            value: ent_no,
          },
          {
            title: "姓名",
            value: orguser_cn_name,
          },
          {
            title: "部门",
            value: dept_cn_name,
          },
          {
            title: "岗位",
            value: bl_dprl_expls1,
          },
        ],
      };
    },
    // 获取消息通知列表
    async getNewsList() {
      try {
        const result = await ys_SysAction.getMessages();
        if (result) {

        }
      } catch (error) {
        console.log(error);
      }
    },
    // 退出登录
    async Quit() {
      try {
        const result = await ys_SysAction.userLoginOut();
        if (result) {
          this.$router.push({
            name: "login",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 菜单切换路由跳转
    async meunSelect(routerInfo) {
      let ishttps = routerInfo.startsWith("http://");
      if (this.$store.state.Demo.btnPower.length > 0 && this.$store.state.Demo.btnPower[3].priv_flag == 1) {
        if (ishttps) {
          if (routerInfo.split('?')[1] == 'agent=1') {
            ys_agentJump.agentPostMessage(`${routerInfo}`);
          } else {
            var result = routerInfo.split('?')[1].split('&');
            var res2 = result[1].split('=')
            if (res2[1] == '07') {
              let data = await this.getDlearnTokenByUserData()
              ys_agentJump.agentPostMessage(`${routerInfo}&token=${data.token}`);
            } else if (res2[1] == '60') {
              let dataHushi = await this.getHuShiTokenByUserData()
              ys_agentJump.agentPostMessage(`${routerInfo}&token=${dataHushi.token}`);
            } else {
              let userInfo = ys_utils.getSessionStorage('CommData') && JSON.parse(ys_utils.getSessionStorage('CommData')) || null;
              if (userInfo && userInfo.token) {
                ys_agentJump.agentPostMessage(`${routerInfo}&token=${userInfo.token}`);
              } else {
                ys_agentJump.agentPostMessage(routerInfo);
              }
            }
          }
        } else {
          this.$router.push({
            name: routerInfo,
          });
        }
      } else if (ishttps) {
        this.$YsMessage.info({
          content: "请联系管理员开通权限",
          duration: 5
        });
      } else {
        this.$router.push({
          name: routerInfo,
        });
      }
    },
    //获取跳转到dlearn的数据
    async getDlearnTokenByUserData() {
      return new Promise((resolve, reject) => {
        this.getDlearnTokenObj({
          "period_user": "f1e2bfa32571b0114f9acec69c6c2534",
          "org_term_no": "127.0.0.1"
        }).then((res) => {

          let { data, msg, scode, status } = res;
          if (data && data.token) {
            resolve(data);
          } else {
            reject(null);
          }
        });
      });
    },
    //获取虎视token
    async getHuShiTokenByUserData() {
      let userlist = ys_utils.getSessionStorage('CommData') && JSON.parse(ys_utils.getSessionStorage('CommData')) || {};
      return new Promise((resolve, reject) => {
        this.getHuShiTokenObj({
          "period": 270546,
          "org_user_id": Object.keys(userlist).length > 0 ? userlist.org_user_id : ''
        }).then((res) => {
          let { data, msg, scode, status } = res;
          if (data && data.token) {
            resolve(data);
          } else {
            this.$YsMessage.error(msg);
            reject(null);
          }
        });
      });
    },
    // tag标签选择
    NowSelTag(routerInfo) {
      this.$router.push({
        name: routerInfo.name,
        query: { ...routerInfo.query },
        params: { ...routerInfo.params },
      });
    },
    // tag标签关闭
    NowCloseTag(info) {
      ys_tagAndbread.clostTagItem(info, (tagData) => {
        saveTagItemList(tagData);
      });
    },
    //点击消息提示
    getNewsInfo() {
      let _this = this
      this.$refs.newsDom.getMessageInfo();

      this.$refs.newsDom.isShow = !this.$refs.newsDom.isShow;

    },
    //回到首页
    gohome() {
      this.$router.push({ name: "homePage" });
    },
    //获取有多少未读消息
    getMessagenumber() {
      let _this = this
      _this.getMessageData({ limit_recd: 99, msg_read: 2, start_recd: 1, }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.newsNumber = data.all_recd
        } else {
          this.newsNumber = 0
        }
      }).catch(err => {
        _this.$YsMessage.error('获取消息失败');
      })
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler: function (newRouteInfo) {
        let { path, name, meta, query, params } = newRouteInfo;
        this.nowRouteName = { path, name, meta, query, params };
        if (!newRouteInfo.meta.hideInTab) {
          // 添加tag标签
          ys_tagAndbread.addTagItem(newRouteInfo, (tagData) => {
            saveTagItemList(tagData);
          });
        }

        this.breadcrumbData = newRouteInfo.meta && newRouteInfo.meta.crumbs;

        // if (newRouteInfo.meta.isHideBreadcrumb) {
        //   // 获取当前路由的面包屑数据
        //   this.breadcrumbData = ys_tagAndbread.setBreadcrumbData(newRouteInfo.matched);
        //   let crumbs = newRouteInfo.matched.splice(1, 1)
        //   this.breadcrumbData = ys_tagAndbread.setBreadcrumbData(crumbs);
        // }
      },
    },
  },
};
</script>
<style >
.newsListBox {
  display: none;
}
</style>
<style lang="less" scoped>
.Main,
.layout-outer {
  height: 100%;
  width: 100%;
  display: flex;

  .siderBox {
    height: 100%;

    // background: #fff;
    .line {
      width: 1px;
      height: 18px;
      background: #cfd7e5;
      opacity: 1;
      position: relative;
      margin: 0 16px 0 24px;
      z-index: 10;
      flex-shrink: 0;
    }

    .frame-logo {
      height: 56px;
      width: 100%;
      margin-bottom: 16px;
      border-bottom: 1px solid #cfd7e5;

      display: flex;
      align-items: center;

      // justify-content: center;
      &>img {
        // height: 40px;
      }

      &>span {
        // margin: 0 16px;
        // color: white;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .car_title {
      position: relative;
      margin: 0;
      flex-shrink: 0;
    }

    .frame-menu {
      width: 100%;
      height: calc(100% - 120px);
    }

    .frame-collapsed {
      width: 100%;
      height: 48px;
      padding: 5px 16px;
      font-size: 26px;
      display: flex;

      span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #405680;
        margin-left: 32px;
      }

      &>i {
        position: absolute;
        cursor: pointer;
      }
    }
  }

  .contentBox {
    width: 200px;

    flex: 1;

    .headerBox {
      width: 100%;
      height: 56px;
      padding: 0 16px 0 0;
      display: flex;
      flex-wrap: nowrap;

      border-bottom: 1px solid #cfd7e5;

      &>div:first-child {
        margin-right: 10px;
        flex: 1;
        align-self: flex-end;
      }

      /deep/ .user_info_img::before {
        height: 40%;
        background: #405680;
      }
    }

    .content-box {
      width: 100%;
      height: calc(100% - 56px);
      padding: 0 16px;
      overflow: hidden;

      .breadcrumbBox {
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;

        .ivu-breadcrumb-item-link {}
      }

      .contentCardBox {
        width: 100%;
        height: calc(100% - 48px);
        // padding-bottom: 10px;
        overflow: auto;
      }
    }
  }

  // 关闭按钮旋转动画
  .animation {
    transition: all 0.5s;
  }

  .demo-avatar-badge {
    .lingdang {
      margin-top: 13px;
      margin-right: 4px;
    }

    /deep/.ivu-badge {
      margin: 15px 10px 0 0;

      .ivu-badge-count {
        background: #ed4014;
        border: 1px solid #ed4014;
        box-shadow: 0 0 0 1px #ed4014;
      }
    }
  }

  /deep/.YsMHeader-one {
    .ivu-dropdown {
      display: none;
    }
  }
}

/deep/.MenuList>li {
  display: flex;
}
</style>
